<!-- 
solt  btn样式  .user-info-btn{
    color: #fbb351;
    white-space: nowrap;
    font-size: 12px;
    padding-left:10px;
  } 
 
 -->


<template>
  <div class="user-info-box">
     <div class="left">
        <div class="bg" :style="{backgroundImage:'url('+user_info.photo+')'}" @click="userHeaderCilck">
        </div>
        <span class="name">{{user_info.name}}</span>
        <span class="table">{{user_info.sex == 0?"男":"女"}}</span>
        <span class="xian"></span>
        <span class="table">{{user_info.age + '岁'}}</span>
        <span class="xian"></span>
        <span class="table">{{user_info.height + 'cm'}}</span>
        <span class="xian"></span>
        <span class="table">{{user_info.weight  + 'kg'}}</span>
     </div>
     <div class="right">
          <slot name="rightBtn"></slot>
     </div>
  </div>
</template>

<script>
  export default{
    name:"gu_user_info",
    props:{
      user_info:{
        type:Object,
        default:{}
      }
    },
    methods:{
      //头像点击
      userHeaderCilck(){
        let user = this.user_info
        this.$emit("userHeaderCilck",user)
      }
    }
  }
</script>

<style scoped="scoped" lang="stylus">
  .user-info-box{
    width:100%;
    display: flex;
    justify-content:flex-start;
    align-items:center;
    .left{
      flex-grow:1;
      color:#414141;
      display:flex;
      align-items:center;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
      .bg{
        width:30px;
        height:30px;
        background-repeat: no-repeat;
        background-size:cover;
        border-radius:30px 30px;
        min-width:30px;
      }
      .name{
        font-size:14px;
        padding-left:8px;
        line-height:16px;
        padding-right:12px;
        font-weight:800;
      }
      .table{
        font-size:12px;
        line-height:14px;
        padding:0 8px;
      }
      .xian{
        width: 2px;
        min-width:2px;
        height:10px;
        background-color:#dcdcdc;
      }
    }
    .right{
      flex-grow:0;
    }
  }

</style>
